<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
    <title>aside</title>
    <link rel="stylesheet" href="../../dist/seedsui.min.css">
    <style>
    aside{
        background-color:#f4f4f4;
    }
    .app-title{
        font-size:17px;
        margin:8px;
        display:block;
    }
    </style>
</head>

<body ontouchstart="">
    <div class="aside" id="aside">
        <div class="aside-wrapper">
            <section class="aside-middle">
                <header>
                    <div class="titlebar">
                        <a class="titlebar-button" href="javascript:back()">
                            <i class="icon icon-arrowleft"></i>
                        </a>
                        <h1 class="titlebar-title">侧边栏</h1>
                    </div>
                </header>
                <article>
                    <p class="app-title">左侧菜单栏</p>
                    <a id="overlayLeft" class="button block" style="margin:8px;">左侧栏-overlay</a>
                    <a id="pushLeft" style="margin:8px" class="button block submit">左侧栏-push</a>

                    <p class="app-title">右侧菜单栏</p>
                    <a id="overlayRight" class="button block" style="margin:8px;">右侧栏-overlay</a>
                    <a id="pushRight" style="margin:8px" class="button block submit">右侧栏-push</a>
                    
                    <div class="card" style="padding:8px;">
                        <h1 class="titlebar-title text-center">这是侧滑菜单的示例</h1>
                        <br/>
                        <h4 class="paragraph">标签属性</h4>
                        <p class="paragraph">data-transition动画，值为：reveal(section动)，overlay(aside覆盖)|push(wrapper动)</p>
                        <h4 class="paragraph">Javascript</h4>
                        <p class="paragraph">new Aside("容器",sides":{"left":"左侧栏","right":"右侧栏"}) </p>
                    </div>
                </article>
            </section>
            <!--左侧边栏-->
            <aside id="aside-left" data-transition="overlay">
                <header>
                    <div class="titlebar">
                        <h1 class="titlebar-title text-center">左侧边栏</h1>
                    </div>
                </header>
                <article style="padding: 10px;">
                    <p class="paragraph">这是侧滑菜单的示例，通常用</p>
                    【属性】
                    <p class="paragraph">data-transition动画，值如下：</p>
                    <p class="paragraph">1.reveal(section动)</p>
                    <p class="paragraph">2.overlay(aside覆盖)</p>
                    <p class="paragraph">3.push(wrapper动)</p>
                    【Javascript】
                    <p class="paragraph">new Aside("容器",sides":{"left":"左侧栏","right":"右侧栏"})</p>
                    
                </article>
                <footer>
                    <a class="button block cancel" style="margin:8px;" id="hideAside1">关闭侧滑</a>
                </footer>
            </aside>
            <!--右侧边栏-->
            <aside id="aside-right" data-transition="push">
                <header>
                    <div class="titlebar">
                        <h1 class="titlebar-title text-center">右侧边栏</h1>
                    </div>
                </header>
                <article style="padding: 10px;">
                    <p class="paragraph">右侧边栏</p>
                </article>
                <footer>
                    <a class="button block cancel" style="margin:8px;" id="hideAside2">关闭侧滑</a>
                </footer>
            </aside>
        </div>
    </div>
    <script src="../../dist/seedsui.min.js"></script>
    <!--Exmobi能力-->
    <!--<script src="../scripts/lib/exmobi/exmobi.js"></script>-->
    <script type="text/javascript">
        window.addEventListener("load",function(e){
            var article=document.querySelector("article");
            var aside=new Aside("#aside",{
                isDrag:true,
                sides:{"left":"#aside-left","right":"#aside-right"},
                onStart:function(e){
                    console.log("开始显示");
                    article.style.overflow="hidden";
                },
                onShowed:function(e){
                    console.log("显示结束");
                    article.style.overflow="hidden";
                },
                onHid:function(e){
                    console.log("隐藏结束");
                    article.style.overflow="auto";
                }
            });
            document.getElementById("overlayLeft").onclick=function(){
                aside.sides["left"].setAttribute("data-transition","overlay");
                aside.update();
                aside.show("left");
            };
    		document.getElementById("pushLeft").onclick=function(){
                aside.sides["left"].setAttribute("data-transition","push");
                aside.update();
                aside.show("left");
            };
    		document.getElementById("overlayRight").onclick=function(){
                aside.sides["right"].setAttribute("data-transition","overlay");
                aside.update();
                aside.show("right");
            };
    		document.getElementById("pushRight").onclick=function(){
                aside.sides["right"].setAttribute("data-transition","push");
                aside.update();
                aside.show("right");
            };
            //关闭按钮
            document.getElementById("hideAside1").onclick=function(e){
                aside.hide();
            };
            document.getElementById("hideAside2").onclick=function(e){
                aside.hide();
            };
        },false);
        //定义exmobi返回
    	function back(){history.go(-1);}
    </script>
</body>
</html>
